import React, { Component, Suspense } from 'react'
import { HashRouter as Router, Switch, Route } from "react-router-dom"
import { Layout, Menu, Breadcrumb } from 'antd';
import {
  DesktopOutlined,
  PieChartOutlined,
  FileOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';

import Home from './pages/Home'
import About from './pages/About'
import User from './pages/User'
import User1 from './pages/User1'
import UseState from "./pages/UseState"
import UseEffect from "./pages/UseEffect"
import UseContext from './pages/UseContext'
import Use2 from "./pages/User2";
import User3 from "./pages/User3"
import UseMemo from "./pages/UseMemo"
import UseRef from './pages/UseRef'
import UseCallBack from "./pages/UseCallBack";
import UseScore from './pages/UseScore'
import Test from "./pages/Test"
import Text from './pages/Text';

const Hoc = React.lazy(() => import('./pages/HOC'));
const  Login  = React.lazy(()=>import ('./pages/Login'))
const  List  = React.lazy(()=>import ('./pages/List'))


const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;


class SiderDemo extends Component {
  state = {
    collapsed: false,
    menuList:[{id:1,path:"/",component:Home,exact:true,msg:"首页"},{id:2,path:"/about",component:About,msg:"关于"},{id:3,path:"/user",component:User,msg:"用户"},{id:4,path:"/user1",component:User1,msg:"用户二"},{id:5,path:"/login",component:Login,msg:"登录"},{id:6,path:"/list",component:List,msg:"列表"}]
  };

  onCollapse = (collapsed: any) => {
    console.log(collapsed);
    this.setState({ collapsed });
  };

  render() {
    const { collapsed } = this.state;
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
          <div className="logo" />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">

            {this.state.menuList.map((item:any)=>{
              
              return ( <Menu.Item key={item.id} icon={<PieChartOutlined />}>
                           <a href={"#"+item.path}>{item.msg}</a> 
                    </Menu.Item>)

            })}
           
           
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }} />
          <Content style={{ margin: '0 16px' }}>

            <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
              <Suspense fallback={<div>Loading...</div>}>
                <Router>
                  <Switch>
                    <Route path="/" component={Home} exact></Route>
                    <Route path="/about" component={About} ></Route>
                    <Route path="/user" component={User}></Route>
                    <Route path="/user1" component={User1}></Route>
                    <Route path="/usestate" component={UseState}></Route>
                    <Route path="/useeffect" component={UseEffect}></Route>
                    <Route path="/usecontext" component={UseContext}></Route>
                    <Route path="/user2" component={Use2}></Route>
                    <Route path="/user3" component={User3}></Route>
                    <Route path="/usememo" component={UseMemo}></Route>
                    <Route path="/useref" component={UseRef}></Route>
                    <Route path="/usecb" component={UseCallBack}></Route>
                    <Route path="/usescore" component={UseScore}></Route>
                    <Route path="/hoc" component={Hoc}></Route>
                    <Route path="/test" component={Test}></Route>
                    <Route path="/login" component={Login}></Route>
                    <Route path="/list" component={List}></Route>
                    <Route path="/text" component={Test}></Route>
                  </Switch>
                </Router>
              </Suspense>

            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
      </Layout>
    );
  }
}

export default SiderDemo;


// import React, { Component,Suspense  } from 'react'
// import  {HashRouter as Router,Switch,Route} from  "react-router-dom"
// import Home from './pages/Home'
// import About from './pages/About'
// import User from './pages/User'
// import User1 from './pages/User1'
// import  UseState from  "./pages/UseState"
// import  UseEffect from  "./pages/UseEffect"
// import UseContext from './pages/UseContext'
// import  Use2 from  "./pages/User2";
// import  User3 from "./pages/User3"
// import  UseMemo from "./pages/UseMemo"
// import UseRef from './pages/UseRef'
// import  UseCallBack from  "./pages/UseCallBack";
// import UseScore from './pages/UseScore'
// import  Test from  "./pages/Test"

// const   Hoc=React.lazy(() => import('./pages/HOC'));
// export default class App extends Component {
//   render() {
//     return (
//       <div>
//           <div>
//               <a href='#/'>首页</a>|
//               <a href='#/about'>关于</a>|
//               <a href='#/user'>用户</a>|
//               <a href='#/user1'>异步的数据管理</a>|
//               <a href='#/usestate'>useState</a>|
//               <a href='#/useeffect'>useEffect</a>|
//               <a href='#/usecontext'>usecontext</a>|
//               <a href='#/user2'>hooks的用户管理</a>|
//               <a href='#/user3'>hooks的异步用户管理</a>|
//               <a href='#/usememo'>hooks的计算属性</a>|
//               <a href='#/useref'>hooks的useRef</a>|
//               <a href='#/usecb'>hooks的usecb</a>|
//               <a href='#/usescore'>自定义hooks</a>|
//               <a href='#/hoc'>高阶组件</a>|
//               <a href='#/test'>测试</a>|
//           </div>
//           <hr></hr>
//           <Suspense fallback={<div>Loading...</div>}>
//           <Router>
//               <Switch>
//                   <Route path="/" component={Home} exact></Route>
//                   <Route path="/about" component={About} ></Route>
//                   <Route path="/user" component={User}></Route>
//                   <Route path="/user1" component={User1}></Route>
//                   <Route path="/usestate" component={UseState}></Route>
//                   <Route path="/useeffect" component={UseEffect}></Route>
//                   <Route path="/usecontext" component={UseContext}></Route>
//                   <Route path="/user2" component={Use2}></Route>
//                   <Route path="/user3" component={User3}></Route>
//                   <Route path="/usememo" component={UseMemo}></Route>
//                   <Route path="/useref" component={UseRef}></Route>
//                   <Route path="/usecb" component={UseCallBack}></Route>
//                   <Route path="/usescore" component={UseScore}></Route>
//                   <Route path="/hoc" component={Hoc}></Route>
//                   <Route path="/test" component={Test}></Route>
//               </Switch>
//           </Router>
//           </Suspense>


//       </div>
//     )
//   }
// }
